import React, { useState, useEffect } from 'react';
import { Menu, Tree, message } from 'antd';
import GDZC from './modal_GDZC';
import XXZC from './modal_XXZC';
import API from '@/api/cyindex.js';

// 资产管理
const PropertyManage = ({ history }) => {
  const [current, setCurrent] = useState('fixedAssets');
  const [orgList, setOrgList] = useState([]);
  const [selectedKey, setSelectedKey] = useState(-1);
  const [isSelected, setIsSelected] = useState(false);
  const items = [
    {
      label: '固定资产',
      key: 'fixedAssets',
    },
    {
      label: '信息资产',
      key: 'informationAssets',
    },
  ];
  const createLink = () => {
    history.push('/networkDefence/propertyManage/create');
  };
  const editLink = (id) => {
    history.push({
      pathname: '/networkDefence/propertyManage/edit',
      query: { id },
    });
  };
  const checkLink = (id) => {
    history.push({
      pathname: '/networkDefence/propertyManage/check',
      query: { id },
    });
  };
  const currentFn = (e) => {
    history.push({
      pathname: '/networkDefence/propertyManage',
      query: { key: e.key },
    });
  };

  const digui = (arrs) => {
    const result = arrs.map((arr) => {
      return {
        title: arr.name,
        key: arr.id,
        children: arr.children && digui(arr.children),
      };
    });
    return result;
  };

  const onSelect = (selectedKeys, info) => {
    console.log('selected', selectedKeys, info);
    if (selectedKeys) {
      //   console.log(info.selected);
      setIsSelected(info.selected);
      setSelectedKey(selectedKeys[0]);
    }
  };
  const init = () => {
    API.getAllOrg().then((res) => {
      if (res) {
        setOrgList(
          res.t.map((item) => {
            return {
              title: item.name,
              key: item.id,
              children: item.children && digui(item.children),
            };
          }),
        );
      }
    });
  };
  //   console.log(orgList);
  useEffect(() => {
    init();
    if (history.location.query.key) {
      setCurrent(history.location.query.key);
    }
  }, [history.location.query]);

  return (
    <>
      <Menu
        onClick={currentFn}
        selectedKeys={[current]}
        mode="horizontal"
        items={items}
        style={{ borderRadius: '8px', marginBottom: '8px' }}
      />
      <div className="assets_menu">
        <div
          style={{
            width: '20%',
            marginRight: '10px',
            overflowY: 'auto',
            height: '100%',
          }}
        >
          <Tree
            treeData={orgList}
            onSelect={onSelect}
            style={{
              borderRadius: 8,
              padding: 6,
            }}
          ></Tree>
        </div>
        <div style={{ width: '80%' }}>
          {current === 'fixedAssets' ? (
            <GDZC isSelected={isSelected} selectedKey={selectedKey}></GDZC>
          ) : (
            <XXZC
              isSelected={isSelected}
              selectedKey={selectedKey}
              createLink={createLink}
              editLink={editLink}
              checkLink={checkLink}
            ></XXZC>
          )}
        </div>
      </div>
    </>
  );
};

export default PropertyManage;
